﻿@using WB.Core.SharedKernels.Questionnaire.Documents
@using WB.UI.Shared.Web.Extensions
@model WB.Core.SharedKernels.SurveyManagement.Web.Controllers.GeographyPreview

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Area</title>
    @*@this.GenerateFavicon(Url.Content("~/Dependencies/img/identity/favicon-hq"))*@

    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #messageDiv {
            position: absolute;
            padding: 6px;
            z-index: 10000;
            background-color: white;
            margin: auto;
            bottom: 20px;
            display: none;
            opacity: 75%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10pt;
            color: darkorange;
        }
        #messageDiv ul{
            padding: 0 0 0 6px;
            max-height: 60px;
            overflow: hidden;
            overflow-y: auto;
            scrollbar-width: thin;
        }
    </style>
    @if (Model != null)
    {
    <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
    <script src="https://js.arcgis.com/4.7/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/geometry/Polygon",
            "esri/geometry/Point",
            "esri/geometry/Multipoint",
            "esri/geometry/Polyline",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "dojo/dom",
            "dojo/domReady!",
        ],
            function (Map, MapView, Graphic, Polygon, Point, Multipoint, Polyline, geometryEngine, projection, SimpleLineSymbol, SimpleFillSymbol, dom) {
                var map = new Map({
                    basemap: "hybrid"
                });

                function getPolyGraphic(geometryJson, isNeighbour, isOverlaping) {

                    @switch (Model.Geometry)
                    {
                        case GeometryType.Multipoint:
                            <text>
                            var polyGeometry = Multipoint.fromJSON(geometryJson);
                            if (polyGeometry.points.length == 0) { 
                                var polyline = Polyline.fromJSON(geometryJson); 
                                polyGeometry = new Multipoint();
                                for (var i = 0; i < polyline.paths[0].length; i++) { //>//it is for razor to end compare char
                                    polyGeometry.addPoint(polyline.getPoint(0, i));
                                }
                                polyGeometry.spatialReference = polyline.spatialReference;
                            }
                            var markerType = 'simple-marker';
                            </text>
                            break;
                        case GeometryType.Polyline:
                            <text>
                            var polyGeometry = Polyline.fromJSON(geometryJson); 
                            var markerType = 'simple-line';
                            </text>
                            break;
                        case GeometryType.Point:
                            <text>
                            var polyGeometry = Point.fromJSON(geometryJson); 
                            var markerType = 'simple-marker';
                            </text>
                            break;
                        default:
                            <text>
                            var polyGeometry = Polygon.fromJSON(geometryJson); 
                            var markerType = 'simple-line';
                            </text>
                            break;
                    }
    
                    let borderColor = isOverlaping 
                        ? [255, 140, 0] // orange
                        : (isNeighbour ? [0, 0, 255] /* blue */ : [255, 0, 0] /* red */) 
                        
                    var fillSymbol = {
                        type: markerType,
                        color: borderColor,
                        width: 2
                    };
                    
                    var polyGraphic = new Graphic({
                        geometry: polyGeometry,
                        symbol: fillSymbol
                    });

                    return polyGraphic;
                }
                
                var areas = [];

                let geometryJson = @Html.Raw(Model.AreaAnswer.Geometry);
                let polyGraphic = getPolyGraphic(geometryJson, false);
                
                var neighbours = [
                @foreach (var neighbour in Model.Neighbors)
                {
                    <text>
                    {
                        title: '@Html.Raw(neighbour.Title)',
                        geometry: @Html.Raw(neighbour.Geometry) 
                    },
                    </text>
                }
                ]

                var overlapingTitles = []
                for (let neighbourIndex in neighbours)
                {
                    var neighbour = neighbours[neighbourIndex];
                    var neighbourGeometry = neighbour.geometry;
                    
                    /*if (neighbourGeometry.spatialReference != geometryJson.spatialReference)
                    {
                        var transformation = projection.getTransformation(neighbourGeometry.spatialReference, geometryJson.spatialReference); 
                        neighbourGeometry = projection.project(neighbourGeometry, geometryJson.spatialReference, transformation);
                    }*/

                    let isOverlaping = !geometryEngine.disjoint(geometryJson, neighbourGeometry);
                    if (isOverlaping)
                        overlapingTitles.push(neighbour.title);

                    var neighbourPolyGraphic = getPolyGraphic(neighbourGeometry, true, isOverlaping);
                    areas.push(neighbourPolyGraphic);
                }
                
                if (overlapingTitles.length > 0)
                {
                    let message = '@Html.Raw(Maps.MapOverlapsWith) '
                    message += overlapingTitles[0]
                    if (overlapingTitles.length > 1)
                        message += ', ' + overlapingTitles[1]
                    if (overlapingTitles.length > 2)
                        message += ' @Html.Raw(Maps.MapOverlapsWithOther)'.replace('{0}', overlapingTitles.length - 2)

                    const messageDiv = dom.byId("messageDiv");
                    messageDiv.innerHTML = message;
                    messageDiv.style.display = 'block';
                }

                areas.push(polyGraphic);
                
                let view = new MapView({
                    container: "viewDiv",
                    map: map,
                    spatialReference: polyGraphic.geometry.spatialReference
                });
                
                view.graphics.addMany(areas);

                let taxLotExtent = polyGraphic.geometry;

                if (taxLotExtent.extent !== null && taxLotExtent.extent !== undefined) {
                    let displayExtent = taxLotExtent.extent.clone()
                    view.extent = displayExtent.expand(1.5);
                }
                else {
                    view.center = taxLotExtent;
                    view.scale = 24000;
                };
            });
    </script>
    }
</head>
<body>
    <div id="viewDiv"></div>
    <div id="messageDiv"></div>
</body>
</html>
